<template>
  <div>
    <headerX title="登录  "></headerX>
    <div class="main">
      <div style="width: 100%; height: 30%">
        <img
          style="width: 100%; height: 100%"
          src="https://oss.flowerplus.cn/oss_jpg/2019-04-26/15562601635260.jpg!60"
          alt=""
        />
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="login.phone"
          name="phone"
          label="手机号"
          placeholder="用户名"
          :rules="[
            { required: true, pattern: $reg.phone, message: '输出有误' },
          ]"
        />
        <van-field
          v-model="login.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, pattern: $reg.pwd, message: '格式有误' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
      <div class="register">
        <span>没有账号?</span>
        <span
          ><a style="color: blue" @click="$router.push({ name: 'register' })"
            >去注册</a
          ></span
        >
      </div>
    </div>
    <foot></foot>
  </div>
</template>
<script>
import axios from "axios";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      login: {},
    };
  },
  mounted() {
    setTimeout(() => {
      console.log(this.$route.query.phone);
      if (this.$route.query.phone) {
        this.login.phone = this.$route.query.phone;
      }
    }, 100);
  },
  computed: {
    ...mapState([
      "count", // this.count => store.state.count
      "city",
      "msg",
      "flag",
      "obj",
    ]),
  },

  methods: {
    ...mapMutations([
      'changeUsername',
      "changeAppPhone", // this.changePhone  = store.commit('changePhone')
    ]),
    onSubmit(val) {
      // console.log(this.$route);
      axios({
        method: "get",
        url: `http://localhost:3200/user?phone=${val.phone}`,
      }).then((res,val) => {
        if (res.data[0].password == this.login.password) {
         this.changeUsername(res.data[0].username)
          this.changeAppPhone(this.login.phone);
          this.$router.push({ name: "Home" });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.register {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}
</style>